<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="play(index)">
        {{ item.split("/")[2] }}
        <audio
          :src="'http://download.websong.wang' + item"
          ref="audemo"
        ></audio>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
// 解决跨域的几种方式
// jsonp （script src img src video src 都不存在跨域的问题）浏览器也不存在跨域
// 服务器向服务器发送请求是不存在跨域的
import axios from "axios";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      list: [
        "/",
        "/wordaudio/activated.mp3",
        "/wordaudio/api.mp3",
        "/wordaudio/beforeCreate.mp3",
        "/wordaudio/beforeDestroy.mp3",
        "/wordaudio/beforeMount.mp3",
        "/wordaudio/beforeUpdate.mp3",
        "/wordaudio/bind.mp3",
        "/wordaudio/capture.mp3",
        "/wordaudio/cloak.mp3",
        "/wordaudio/component.mp3",
        "/wordaudio/components.mp3",
        "/wordaudio/computed.mp3",
        "/wordaudio/created.mp3",
        "/wordaudio/data.mp3",
        "/wordaudio/deactivated.mp3",
        "/wordaudio/delete.mp3",
        "/wordaudio/destroy.mp3",
        "/wordaudio/destroyed.mp3",
        "/wordaudio/dict.js",
        "/wordaudio/directive.mp3",
        "/wordaudio/directives.mp3",
        "/wordaudio/effect.mp3",
        "/wordaudio/else.mp3",
        "/wordaudio/emit.mp3",
        "/wordaudio/enter.mp3",
        "/wordaudio/errorCaptured.mp3",
        "/wordaudio/filters.mp3",
        "/wordaudio/for.mp3",
        "/wordaudio/forceUpdate.mp3",
        "/wordaudio/html.mp3",
        "/wordaudio/if.mp3",
        "/wordaudio/include.mp3",
        "/wordaudio/keep-alive.mp3",
        "/wordaudio/lazy.mp3",
        "/wordaudio/left.mp3",
        "/wordaudio/methods.mp3",
        "/wordaudio/middle.mp3",
        "/wordaudio/mixins.mp3",
        "/wordaudio/model.mp3",
        "/wordaudio/mount.mp3",
        "/wordaudio/mounted.mp3",
        "/wordaudio/name.mp3",
        "/wordaudio/nextTick.mp3",
        "/wordaudio/number.mp3",
        "/wordaudio/off.mp3",
        "/wordaudio/on.mp3",
        "/wordaudio/once.mp3",
        "/wordaudio/passive.mp3",
        "/wordaudio/pre.mp3",
        "/wordaudio/prevent.mp3",
        "/wordaudio/props.mp3",
        "/wordaudio/qualifier.mp3",
        "/wordaudio/right.mp3",
        "/wordaudio/self.mp3",
        "/wordaudio/set.mp3",
        "/wordaudio/show.mp3",
        "/wordaudio/slot.mp3",
        "/wordaudio/stop.mp3",
        "/wordaudio/sync.mp3",
        "/wordaudio/tab.mp3",
        "/wordaudio/template.mp3",
        "/wordaudio/text.mp3",
        "/wordaudio/transition.mp3",
        "/wordaudio/trim.mp3",
        "/wordaudio/updated.mp3",
        "/wordaudio/use.mp3",
        "/wordaudio/Vue.mp3",
        "/wordaudio/watch.mp3",
      ],
    };
  },
  created() {
    // axios.get('http://172.17.80.13:3000/list').then(res => {
    //   console.log(res);
    // })
  },
  methods: {
    play(i) {
      // console.log(this.$refs.audemo[i]);
      this.$refs.audemo[i].play();
      axios
        .post(
          "https://cd6fff10-346c-44e6-917b-58244d71b39e.bspapp.com/pushMessage",
          { id: "f79ae231fdd1880aeb6e8edc1b3d6bf8" }
        )
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
li {
  list-style: none;
  background: #42b983;
  color: #ffffff;
  padding: 5px 10px;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>
